<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        
        <h2>按钮样式</h2>
        <div>
            <el-radio-group v-model="radio1">
              <el-radio-button label="男"></el-radio-button>
              <el-radio-button label="女"></el-radio-button>
            </el-radio-group>
          </div>
          <div style="margin-top: 20px">
            <el-radio-group 
            @change="abc"
            text-color="#fff" fill="#f00" 
            v-model="radio2" size="medium">
              <el-radio-button label="上海" ></el-radio-button>
              <el-radio-button label="北京"></el-radio-button>
              <el-radio-button label="广州"></el-radio-button>
              <el-radio-button label="深圳"></el-radio-button>
            </el-radio-group>
          </div>
          <div style="margin-top: 20px">
            <el-radio-group v-model="radio3" size="small">
              <el-radio-button label="上海"></el-radio-button>
              <el-radio-button label="北京" disabled ></el-radio-button>
              <el-radio-button label="广州"></el-radio-button>
              <el-radio-button label="深圳"></el-radio-button>
            </el-radio-group>
          </div>
          <div style="margin-top: 20px">
            <el-radio-group v-model="radio4" disabled size="mini">
              <el-radio-button label="上海"></el-radio-button>
              <el-radio-button label="北京"></el-radio-button>
              <el-radio-button label="广州"></el-radio-button>
              <el-radio-button label="深圳"></el-radio-button>
            </el-radio-group>
          </div>
        
        <h2>单选框组</h2>
        <el-radio-group v-model="radio">
            <el-radio :label="3">备选项</el-radio>
            <el-radio :label="6">备选项</el-radio>
            <el-radio :label="9">备选项</el-radio>
        </el-radio-group>
        
        <h2>单选框</h2>
        <p>{{ radio }}</p>
        <el-radio v-model="radio" label="0" border>备选项</el-radio>
        <el-radio v-model="radio" label="1">备选项</el-radio>
        <el-radio disabled v-model="radio" label="2">备选项</el-radio>
        <el-radio v-model="radio" label="3">备选项</el-radio>
        
        <h2>布局</h2>
        <el-container>
            <el-main>
                <el-row :gutter="10">
                    <el-col :span="4">
                        <div class="dh">左侧导航</div>
                    </el-col>
                    <el-col :span="11">
                        <div class="lb">轮播图</div>
                        <div class="lb2">轮播图2</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="gg">广告位</div>
                        <div class="gg2">广告位2</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="hi">Hi！你好</div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>


        <h2>按钮 disabled</h2>
        <p>
            <el-checkbox v-model="bool">勾选协议</el-checkbox>
            <!-- 
            <el-button @click="btn2" type="primary" size="mini">按钮</el-button>
            勾选协议
            -->
        </p>
        <el-button type="success" :disabled="!bool" @click="btn">立即注册</el-button>

        <h2>按钮</h2>
        <el-button>默认按钮</el-button>
        <el-button type="primary">默认按钮</el-button>
        <el-button type="info">默认按钮</el-button>
        <el-button type="primary" plain>默认按钮</el-button>
        <el-button type="primary" round>默认按钮</el-button>
        <el-button type="primary" icon="el-icon-s-flag" circle></el-button>

        <h2>Icon</h2>
        <i class="el-icon-edit"></i>
        <i class="el-icon-headset"></i>

        <h2>布局</h2>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
        <h2>4栏</h2>
        <el-container>
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="span">span</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="span">span</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="span">span</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="span">span</div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data() {
            return {
                bool: true,
                radio:'1',
                radio1: '',
                radio2: '上海',
                radio3: '上海',
                radio4: '上海'
            }
        },
        methods: {
            btn() {
                alert("注册成功");
            },
            btn2() {
                this.bool = !this.bool;
            },
            abc(e){
                console.log(e); //回调获取的
                console.log(this.radio2); //通过data值获取的
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .dh,
    .lb,
    .lb2,
    .gg,
    .gg2,
    .hi {
        background: #409EFF;
        color: #fff;
    }

    .dh,
    .hi {
        height: 500px;
    }

    .lb,
    .gg {
        height: 290px;
        margin-bottom: 10px;
    }

    .lb2,
    .gg2 {
        height: 200px;
    }

    .span {
        background: red;
        color: #fff;
    }

    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
